/* eslint-disable react/prop-types */
import React, { useEffect } from "react";
import "../style/RainAnimation.less"; // 样式文件

function RainAnimation({ width = 500, height = 300 }) {
	useEffect(() => {
		// 生成随机数
		function getRandom(min: number, max: number) {
			return Math.random() * (max - min) + min;
		}

		// 创建雨滴
		for (let i = 0; i < 100; i++) {
			const drop = document.createElement("div");
			drop.className = "raindrop";
			drop.style.left = `${getRandom(0, width)}px`;
			drop.style.top = `${getRandom(-height, 0)}px`;
			drop.style.animationDelay = `${getRandom(0, 10)}s`;
			// drop.style = { overflow: "hidden", zIndex: 99 };
			document.getElementById("rain-animation-container")?.appendChild(drop);
		}

		// 在组件销毁时清理雨滴
		return () => {
			const raindrops = document.querySelectorAll(".raindrop");
			raindrops.forEach(drop => drop.remove());
		};
	}, []); // 只在组件加载时执行一次

	return null; // 这个组件不渲染任何内容
}

export default RainAnimation;
